<template>
  <div class="temperature">
    <div class="wrapper">
      <div class="header">
        <el-form :inline="true" size="small" label-width="84px">
          <div>
            <el-form-item label="位置">
              <el-cascader
                v-model="spacesModel"
                :props="spaceProps"
                :options="options"
                clearable
                @change="onChange"
              ></el-cascader>
            </el-form-item>
            <el-form-item label="设备：">
              <el-select v-model="search.eid" placeholder="请选择">
                <el-option
                  v-for="item in equips"
                  :key="item.equipmentID"
                  :label="item.name"
                  :value="item.equipmentID"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="mini" @click="getZoneAnaInfo">查询</el-button>
            </el-form-item>
          </div>
        </el-form>
      </div>
      
      <div class="charts">
        <div class="chart" v-for="(item, index) in datas" :key="index">
          <el-card style="height: 240px; display: block">
            <line-chart :height="'240px'" :data="item"></line-chart>
          </el-card>
        </div>
      </div>

      <el-card>
        <div class="eltable">
          <el-table
            style="width: 100%"
            row-key="id"
            border
            :data="rows"
            :header-cell-style="{ 'background-color': '#EEEEEE' }"
          >
            <el-table-column
              v-for="col in cols"
              :key="col.prop"
              :prop="col.prop"
              :label="col.label"
            ></el-table-column>
          </el-table>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import LineChart from "./components/LineChart";

export default {
  components: { LineChart },
  name: "temperature",
  data() {
    return {
      spacesModel: [],
      spaceProps: {
        lazy: false,
        checkStrictly: true
      },
      search: {
        sid: 0,
        eid: '',
        seq: 0,
      },
      datas: [{ xdata: [0], ydata: [0] }],
      cols: [{ prop: 'temp', label: '℃' }],
      rows: [{ temp: "上温区(基准)" }, { temp: "下温区(基准)" }, { temp: "上温区(实测)" }, { temp: "下温区(实测)" }, { temp: "偏差" }, { temp: "CPK" }],
    }
  },
  computed: {
    zoneAnaInfos() {
      return this.$store.state.datainterface.zoneAnaInfos
    },
    options() {
      return this.$store.state.space.options
    },
    equips() {
      return this.$store.state.equipment.equips
    },
  },
  methods: {
    async getZoneAnaInfo() {
      this.datas = []
      this.cols = [{ prop: 'temp', label: '℃' }]
      if (this.search.eid) {
        this.rows = [{ temp: "上温区(基准)" }, { temp: "下温区(基准)" }, { temp: "上温区(实测)" }, { temp: "下温区(实测)" }, { temp: "偏差" }, { temp: "CPK" }]
        await this.$store.dispatch('datainterface/ZoneAnaInfo', { eid: 15127, seq: 0, date: "", suid: "", n: "" })
        console.log(this.zoneAnaInfos)
        let temps = this.zoneAnaInfos["炉温温区"]
        temps.forEach(e => {
          let data = { title: e.zoneName, xdata: [], ydata: [] }
          e.zoneAnaInfo.forEach(z => {
            data.xdata.push(z.rowNum)
            data.ydata.push(z.value)
          })
          this.datas.push(data)
        })
        let prods = this.zoneAnaInfos["产品炉温"]
        prods.forEach(e => {
          this.cols.push({ prop: e.zoneName, label: e.zoneName })
          this.rows[0][e.zoneName] = e.upStandard
          this.rows[1][e.zoneName] = e.downStandard
          this.rows[2][e.zoneName] = e.upMeasured
          this.rows[3][e.zoneName] = e.downMeasured
          this.rows[4][e.zoneName] = e.deviation
          this.rows[5][e.zoneName] = e.cpk
        })
      }
    },
    async onChange(val) {
      if (val.length > 0) {
        this.search.sid = val[val.length - 1]
        await this.$store.dispatch('equipment/getEquips', { page: 0, size: 0, spaceId: this.search.sid })
      }
    },
  },
  created() {},
  mounted() {
    this.$store.dispatch('space/GetSpaces', { name: '', parentid: '', page: 0, size: 0 })
  },
  destroyed() {},
};
</script>

<style lang="scss" scoped>
.temperature {
  width: 100%;
  padding: 30px;
  .header {
    margin-bottom: 10px;
  }
  .content .datainfo {
    margin-bottom: 20px;
    .dataitem {
      display: inline-block;
      margin-right: 20px;
      font-size: 14px;
    }
  }
  .charts {
    .chart {
      display: inline-block;
      width: 48%;
      margin-right: 2%;
      margin-bottom: 30px;
      height: 240px;
    }
  }
  .eltable {
    height: 360px;
  }
}
</style>